<template>
    <div class="chart-box" ref="chart"> </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
    name: "CaseTrial",
    data() {
        return {
            options: {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    left: 'center',
                    align: 'left',
                    top: '2%',
                    textStyle: {
                        color: '#fff'
                    }
                },
                grid: {
                    left: '5%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    data: [
                        '2020年',
                        '2021年',
                        '2022年',
                        '2023年',
                        '2024年',
                    ],
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "#fff",
                            width: 1,
                            type: "solid"
                        }
                    },
                    axisTick: {
                        show: true,
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: "#fff",
                        }
                    },
                }],
                yAxis: [{
                    type: 'value',
                    name: '件数',
                    axisLabel: {
                        formatter: '{value}'
                    },
                    axisTick: {
                        show: true,
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "#fff",
                            width: 1,
                            type: "solid"
                        },
                    },

                    splitLine: {
                        show: false,
                        lineStyle: {
                            color: "#fff",
                        }
                    }
                }],
                series: [{
                    name: '家事纠纷案件',
                    type: 'bar',
                    data: [220, 120, 240, 266, 210],
                    barWidth: '25%',
                    label: {
                        show: true,
                        position:'outside',
                        textStyle:{
                            color:'#fff'
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'rgb(255, 130, 71)',
                            opacity: 1,
                            barBorderRadius: [50, 50, 0, 0],
                        },
                    }
                }, {
                    name: '涉未成年人案件',
                    type: 'bar',
                    data: [130, 150, 220, 245, 136],
                    barWidth: '25%',
                    label: {
                        show: true,
                        position:'outside',
                        textStyle:{
                            color:'#fff'
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'rgb(70, 147, 236)',
                            opacity: 1,
                            barBorderRadius: [50, 50, 0, 0],
                        }
                    }
                }]
            }
        }
    },
    mounted() {
        setTimeout(() => {
            const chart = echarts.init(this.$refs.chart)
            chart.setOption(this.options)
        }, 0);
    }
}
</script>

<style lang="less" scoped>
.chart-box {
    height: 225px;
}
</style>